import { useDispatch, useSelector } from 'react-redux';
// import { configureStore } from '@reduxjs/toolkit'

import TicketList from '../TicketList/TicketList';
import Sort from '../Sort/Sort';
import Filter from '../Filter/Filter';

import classes from './App.module.scss';
import { useEffect } from 'react';
import { getId } from '../store/TicketReducer';

function App() {
  const dispatch = useDispatch();
  const id = useSelector((state) => state.getTickets.id.searchId);

  useEffect(() => {
    dispatch(getId());
  }, [dispatch]);

  return (
    <div className={classes.App}>
      <div className={classes['logo']}>{logo}</div>
      <div className={classes['main']}>
        <Filter />
        <div className={classes['right']}>
          <Sort />
          <TicketList id={id} />
        </div>
      </div>
    </div>
  );
}

const logo = (
  <svg
    className="logo"
    xmlns="http://www.w3.org/2000/svg"
    width="82"
    height="89"
    viewBox="0 0 82 89"
    fill="none"
  >
    <g filter="url(#filter0_d_1_705)">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M41 70C53.1503 70 63 60.1503 63 48C63 35.8497 53.1503 26 41 26C28.8497 26 19 35.8497 19 48C19 60.1503 28.8497 70 41 70Z"
        fill="black"
        fillOpacity="0.01"
      />
    </g>
    <g filter="url(#filter1_d_1_705)">
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M41 70C57.5685 70 71 56.5685 71 40C71 23.4315 57.5685 10 41 10C24.4315 10 11 23.4315 11 40C11 56.5685 24.4315 70 41 70Z"
        fill="#2196F3"
      />
      <path
        d="M69 40C69 55.464 56.464 68 41 68C25.536 68 13 55.464 13 40C13 24.536 25.536 12 41 12C56.464 12 69 24.536 69 40Z"
        stroke="#42A5F5"
        strokeWidth="4"
      />
    </g>
    <mask
      id="mask0_1_705"
      maskUnits="userSpaceOnUse"
      x="11"
      y="10"
      width="60"
      height="60"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M41 70C57.5685 70 71 56.5685 71 40C71 23.4315 57.5685 10 41 10C24.4315 10 11 23.4315 11 40C11 56.5685 24.4315 70 41 70Z"
        fill="white"
      />
    </mask>
    <g mask="url(#mask0_1_705)">
      <path
        d="M13.714 32.875H67.536"
        stroke="#42A5F5"
        strokeWidth="4"
        strokeLinecap="square"
      />
      <path
        d="M13.714 48.625H67.536"
        stroke="#42A5F5"
        strokeWidth="4"
        strokeLinecap="square"
      />
      <path
        d="M40.25 14.5C40.25 14.5 30.2878 26.0775 30.5035 40.75C30.7191 55.4225 40.25 65.5 40.25 65.5"
        stroke="#42A5F5"
        strokeWidth="4"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M41 14.5C41 14.5 50.9622 26.0775 50.7465 40.75C50.5309 55.4225 41 65.5 41 65.5"
        stroke="#42A5F5"
        strokeWidth="4"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </g>
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M51.1946 29.0278C51.3946 28.9123 51.6151 28.8406 51.8456 28.8261C52.8621 28.7621 55.798 28.678 56.4347 29.7809C57.0715 30.8838 55.5298 33.3837 54.966 34.2314C54.8383 34.4235 54.666 34.5784 54.4662 34.6938L48.3904 38.2016L49.2343 55.302C49.2461 55.5414 49.125 55.7679 48.9193 55.8911L47.67 56.6393C47.5055 56.7379 47.3057 56.7586 47.1244 56.696L46.1776 56.369C46.019 56.3143 45.8877 56.2002 45.8114 56.0508L39.3534 43.4192L32.9843 47.0964L32.2974 51.7678C32.2498 52.0912 31.9693 52.3288 31.6426 52.3226L31.1446 52.3132C30.8927 52.3084 30.6663 52.1583 30.5638 51.9282L28.7741 47.9122C27.5439 47.9515 26.3891 47.8306 26.0792 47.294C25.7697 46.7579 26.2429 45.7021 26.893 44.6611L24.3295 41.1301C24.1815 40.9263 24.1648 40.6552 24.2866 40.4347L24.5274 39.9987C24.6854 39.7126 25.0314 39.5886 25.3352 39.709L29.6974 41.4392L36.0779 37.7555L28.4192 25.9267C28.328 25.7858 28.2948 25.6152 28.3267 25.4504L28.517 24.4669C28.5534 24.2786 28.6712 24.116 28.8389 24.0228L30.1115 23.315C30.321 23.1984 30.5777 23.2068 30.7791 23.3368L45.0768 32.5599L51.1946 29.0278Z"
      fill="white"
    />
    <mask
      id="mask1_1_705"
      maskUnits="userSpaceOnUse"
      x="24"
      y="23"
      width="33"
      height="34"
    >
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M51.1946 29.0278C51.3946 28.9123 51.6151 28.8406 51.8456 28.8261C52.8621 28.7621 55.798 28.678 56.4347 29.7809C57.0715 30.8838 55.5298 33.3837 54.966 34.2314C54.8383 34.4235 54.666 34.5784 54.4662 34.6938L48.3904 38.2016L49.2343 55.302C49.2461 55.5414 49.125 55.7679 48.9193 55.8911L47.67 56.6393C47.5055 56.7379 47.3057 56.7586 47.1244 56.696L46.1776 56.369C46.019 56.3143 45.8877 56.2002 45.8114 56.0508L39.3534 43.4192L32.9843 47.0964L32.2974 51.7678C32.2498 52.0912 31.9693 52.3288 31.6426 52.3226L31.1446 52.3132C30.8927 52.3084 30.6663 52.1583 30.5638 51.9282L28.7741 47.9122C27.5439 47.9515 26.3891 47.8306 26.0792 47.294C25.7697 46.7579 26.2429 45.7021 26.893 44.6611L24.3295 41.1301C24.1815 40.9263 24.1648 40.6552 24.2866 40.4347L24.5274 39.9987C24.6854 39.7126 25.0314 39.5886 25.3352 39.709L29.6974 41.4392L36.0779 37.7555L28.4192 25.9267C28.328 25.7858 28.2948 25.6152 28.3267 25.4504L28.517 24.4669C28.5534 24.2786 28.6712 24.116 28.8389 24.0228L30.1115 23.315C30.321 23.1984 30.5777 23.2068 30.7791 23.3368L45.0768 32.5599L51.1946 29.0278Z"
        fill="white"
      />
    </mask>
    <g mask="url(#mask1_1_705)">
      <rect
        x="45.536"
        y="30.7839"
        width="1.30853"
        height="12.4084"
        transform="rotate(60 45.536 30.7839)"
        fill="#EBECF2"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M48.9193 55.8911C49.125 55.7679 49.246 55.5415 49.2342 55.302L48.3628 37.6426L39.1264 42.9752L45.8113 56.0508C45.8877 56.2002 46.0189 56.3143 46.1775 56.369L47.1244 56.696C47.3057 56.7587 47.5054 56.7379 47.67 56.6393L48.9193 55.8911Z"
        fill="#DEE1E3"
      />
      <path
        opacity="0.4"
        fillRule="evenodd"
        clipRule="evenodd"
        d="M28.8366 47.8013L28.7476 47.8527L30.5638 51.9282C30.6664 52.1584 30.8928 52.3084 31.1447 52.3132L31.6426 52.3226C31.9694 52.3288 32.2498 52.0912 32.2974 51.7678L33.023 46.8334L32.56 47.1007C32.4167 47.1834 32.2626 47.2452 32.1011 47.2813C31.551 47.4041 30.1548 47.6951 28.8366 47.8013Z"
        fill="#DEE1E3"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M39.2482 43.2134L48.3776 37.9426L48.4768 39.9539L40.9559 46.5538L39.2482 43.2134Z"
        fill="#C5C6CC"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M57.4823 32.9524L27.6913 50.1523C27.6913 50.1523 26.8123 48.5636 26.0793 47.2939C26.0704 47.2786 26.062 47.263 26.0541 47.2473C27.4056 47.345 30.1269 47.2351 32.7661 45.7114L53.3906 33.8038C55.6822 32.4807 56.2435 30.7674 56.5526 30.0309C57.0312 31.316 57.4823 32.9524 57.4823 32.9524Z"
        fill="#DEE1E3"
      />
    </g>
    <defs>
      <filter
        id="filter0_d_1_705"
        x="8"
        y="23"
        width="66"
        height="66"
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity="0" result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dy="8" />
        <feGaussianBlur stdDeviation="5.5" />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.215686 0 0 0 0 0.407843 0 0 0 0 0.556863 0 0 0 0.25 0"
        />
        <feBlend
          mode="normal"
          in2="BackgroundImageFix"
          result="effect1_dropShadow_1_705"
        />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="effect1_dropShadow_1_705"
          result="shape"
        />
      </filter>
      <filter
        id="filter1_d_1_705"
        x="0"
        y="0"
        width="82"
        height="82"
        filterUnits="userSpaceOnUse"
        colorInterpolationFilters="sRGB"
      >
        <feFlood floodOpacity="0" result="BackgroundImageFix" />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dy="1" />
        <feGaussianBlur stdDeviation="5.5" />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0.215686 0 0 0 0 0.407843 0 0 0 0 0.556863 0 0 0 0.3 0"
        />
        <feBlend
          mode="normal"
          in2="BackgroundImageFix"
          result="effect1_dropShadow_1_705"
        />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="effect1_dropShadow_1_705"
          result="shape"
        />
      </filter>
    </defs>
  </svg>
);

export default App;
